import React, { Component } from 'react'
import { Modal, Table } from 'antd'
import PropTypes from 'prop-types'
import style from './ResultModal.module.less'

// 获取表格字段配置
function getColumns () {
  return [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 100
    },
    {
      title: '收案号',
      dataIndex: 'acceptno_desc',
      key: 'acceptno_desc',
      width: 150
    },
    {
      title: '案号',
      dataIndex: 'caseno_desc',
      key: 'caseno_desc',
      width: 150
    },
    {
      title: '秘书',
      dataIndex: 'processer',
      key: 'processer',
      width: 150
    },
    {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      render: (v, l) => {
        return <span className={style['link-del-btn']} onClick={() => this.props.removeSelected(l)}>移除</span>
      }
    }
  ]
}

export default class componentName extends Component {
  state = {
    list: []
  }

  // 初始化列表
  initList () {
    this.setState({
      list: this.props.list.map((li, i) => {
        li.index = i + 1
        return li
      })
    })
  }

  componentDidUpdate (prev) {
    if (prev.list !== this.props.list) {
      this.initList()
    }
  }

  componentDidMount () {
    this.initList()
  }

  render () {
    const { list } = this.props
    return (
      <Modal
        title={`已选择 ${list.length} 项`}
        open={this.props.visible}
        width={800}
        destroyOnClose
        maskClosable={false}
        onCancel={() => this.props.hide()}
        footer={null}
      >
        <Table dataSource={list} columns={getColumns.call(this)} pagination={false} rowKey='id' scroll={{ y: 300 }} />
      </Modal>
    )
  }
}

componentName.propTypes = {
  visible: PropTypes.bool,
  list: PropTypes.array,
  hide: PropTypes.func,
  // eslint-disable-next-line react/no-unused-prop-types
  removeSelected: PropTypes.func
}

componentName.defaultProps = {
  visible: false,
  list: [],
  hide: () => {},
  removeSelected: () => {}
}
